<!--引入面包屑组件-->
<pro-header style="position:relative;">
    <ng-template #tab >
        <span><i class="anticon anticon-pushpin-o"></i>&nbsp;{{operator.operatorName}}</span>
        <nz-tabset style="position:relative;left: 50%;"  [nzSize]="'default'" [nzSelectedIndex]="0">
            <nz-tab  *ngFor="let tab of tabs" (nzSelect)="getRouter(tab.router)">
                <ng-template #nzTabHeading>
                    {{tab.name}}
                </ng-template>
            </nz-tab>
        </nz-tabset>
    </ng-template>
</pro-header>

<!-- 操作员详情界面 -->
<!--<div class="ui-g">
    <div class="ui-g-4">
        <p-card title="操作员详情">
            <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item style="font-size: 18px;">
                        <div nz-col [nzSpan]="10" class="ad-desc-list__term ng-star-inserted">:</div>
                        <div nz-col [nzSpan]="14" class="ad-desc-list__detail ng-star-inserted"></div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item  style="font-size: 18px;">
                        <div nz-col [nzSpan]="10" class="ad-desc-list__term ng-star-inserted">:</div>
                        <div nz-col [nzSpan]="14" class="ad-desc-list__detail ng-star-inserted"></div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item  style="font-size: 18px;">
                        <div nz-col [nzSpan]="8" class="ad-desc-list__term ng-star-inserted">:</div>
                        <div nz-col [nzSpan]="16" class="ad-desc-list__detail ng-star-inserted">{{}}</div>
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-ite  style="font-size: 18px;">
                        <div  nz-col [nzSpan]="10" class="ad-desc-list__term ng-star-inserted">:</div>
                        <div nz-col [nzSpan]="14" class="ad-desc-list__detail ng-star-inserted">{{ }}</div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item  style="font-size: 18px;">
                        <div nz-col [nzSpan]="10" class="ad-desc-list__term ng-star-inserted">:</div>
                        <div nz-col [nzSpan]="14" class="ad-desc-list__detail ng-star-inserted">{{}}</div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item  style="font-size: 18px;">
                        <div nz-col [nzSpan]="10" class="ad-desc-list__term ng-star-inserted">:</div>
                        <div nz-col [nzSpan]="14" class="ad-desc-list__detail ng-star-inserted">{{}}</div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item  style="font-size: 18px;">
                        <div nz-col [nzSpan]="10" class="ad-desc-list__term ng-star-inserted">:</div>
                        <div nz-col [nzSpan]="14"  class="ad-desc-list__detail ng-star-inserted"></div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item style="font-size: 18px;">
                        <div nz-col [nzSpan]="10" class="ad-desc-list__term ng-star-inserted">:</div>
                        <div nz-col [nzSpan]="14" class="ad-desc-list__detail ng-star-inserted">{{}}</div>
                    </div>
                </div>

            </div>
         </p-card>
    </div>
    <div class="ui-g-8">
        <p-card>
            <router-outlet></router-outlet>
        </p-card>
    </div>
</div>-->

<div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
    <div nz-col [nzSpan]="widthLeft" class="mb-md">
        <nz-card   [nzBordered]="false">
            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                    <span style="margin-left:5px" *ngIf='isShow'>操作员基础信息</span>
                </div>
            </ng-template>
            <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="fa fa-user-circle" nz-col [nzSpan]="1"></i>
                    <div  *ngIf='isShow' class="divDisplay"nz-col [nzSpan]="22">
                        <label>操作员名称：</label>
                        <div>{{operator.operatorName}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="fa fa-user-o" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>登陆用户名：</label>
                        <div>{{operator.userId}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="fa fa-user-circle-o" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >操作员状态：</label>
                        <div >{{operator.operatorStatus}}</div>
                    </div>
                </div>


                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="fa fa-address-book" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >认证模式：</label>
                        <div >{{operator.authMode}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-lock"  nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>锁定次数限制：</label>
                        <div>{{operator.lockLimit}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-close-circle" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label >当前错误次数：</label>
                        <div >{{operator.errCount}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-clock-circle" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>过期时间：</label>
                        <div>{{operator.invalDate | date:'yyyy-MM-dd' }}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-clock-circle-o" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <label>最近登陆时间：</label>
                        <div>{{operator.lastLogin | date:'yyyy-MM-dd'}}</div>
                    </div>
                </div>
                <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i *ngIf='!isShow' class="anticon anticon-clock-circle-o" nz-col [nzSpan]="1"></i>
                    <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                        <div nz-col [nzSpan]="4" [nzOffset]="10">
                            <button *ngIf="operator.operatorStatus === '停用'" (click)="operatorStaus('logout')" nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">启用</button>
                            <button *ngIf="operator.operatorStatus === '注销'" (click)="operatorStaus('stop')" nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">重新启用</button>
                            <button *ngIf="operator.operatorStatus === '正常'" nz-button type="submit" [nzType]="'danger'" (click)="operatorStaus('stop')"  [nzSize]="'large'">停用</button>
                        </div>
                    </div>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <p-card>
            <router-outlet></router-outlet>
        </p-card>
    </div>
</div>
